Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
new Vue({
    el:'#app',
    data:{
        loading: false,   //页面加载,false:关闭,true:加载中
        dialogFormVisible: false,   //是否弹出的添加窗口
        dialogUpdateVisible: false,   //是否弹出的修改窗口
        //用户信息
        admin: {
          username: '未登录',
          imgAvatar: 'https://img.gejiba.com/images/6fdc934e8cb5aa040764d0ff5b287d00.th.webp'
        },
        //搜索相关数据
        searchData:{
            name: '',
            address: ''
        },
        //分页数据
        page:{
            content:[],
            currentPage: 1,   //当前页
            pageSize: 5,  //当前页条数
            total: 1,  //数据总条数
            pages : 1,  //总页数
            firstPage : false,  //是否禁用前一页按钮
            lastPage: false,  //是否有禁用下一页按钮
        },

        //复选框
        multipleSelection: [],

        //修该和添加规则
        rules:{    //表单规则
            name: [{ required: true, message: '姓名必填项', trigger: 'blur' }],  //blur失去焦点
            gender: [
                { required: true, message: '性别必填项', trigger: 'blur' },
                { required: true, pattern:/^男$|^女$/,message: '请输入正确的性别', trigger: 'blur' }
            ],
            age: [{ required: false,pattern:/^\d{1,3}$/, message: '请输入正确的年龄', trigger: 'blur' }],
            address: [{ required: true, message: '地址必填项', trigger: 'blur' }],
        },
        //修改窗口信息
        elAUpdate: {},
        //添加窗口信息
        elAdd: {}
    },
    //钩子函数，VUE对象初始化完成后自动执行
    created(){
        this.findPage();
        this.gainUser();
    },
    methods:{
        //获取用户信息
        gainUser(){
            axios({
                method: "get",
                url: "/user/gainUser",
            }).then((res)=>{
                this.admin.username=res.data.username;
            });
        },
        //获取当前页数据
        findPage(){
            this.loading=true;
            axios({
                method: "POST",
                url: "/book/PageList/"+this.page.currentPage+"/"+this.page.pageSize,
                data:{
                    name: this.searchData.name,
                    address: this.searchData.address
                },
            }).then((res)=>{
                this.page.content=res.data.records;
                this.page.currentPage=res.data.current;
                this.page.pageSize=res.data.size;
                this.page.total=res.data.total;
                this.page.pages=res.data.pages;
                this.page.firstPage=this.page.currentPage==1?true:false;
                this.page.lastPage=this.page.currentPage==this.page.pages?true:false;
                setTimeout(function () {
                },1000)
                this.loading=false;  //关闭加载
            });
        },
        //添加和修改的取消
        cancel(){
            this.dialogFormVisible=false;
            this.dialogUpdateVisible=false;
        },
        //显示修改页面
        handleUpdate(row){
            axios({
                method: "get",
                url: "/book/selectId/"+row.id,
            }).then((res)=>{
                this.elAUpdate=res.data;
                this.dialogUpdateVisible=true;
            });
        },
        //提交修改信息
        handleEdit(){
            this.$confirm("此操作将从数据库中永久修改数据，是否继续？","提示",{
                confirmButtonText:"确定",
                cancelButtonText:"取消",
                type: "warning"
            }).then(()=>{   //选择确定的情况
                axios({
                    method: "POST",
                    url: "/book/updateRow",
                    data: this.elAUpdate
                }).then((res)=>{
                    if(res.data=true){
                        this.$message({
                            message:"修改成功",
                            type:"success"
                        });
                    }else{
                        this.$message(" 修改失败，请重试");
                    }
                }).finally(()=>{
                    this.findPage();
                });
            }).catch(()=>{     //选择取消的情况
                this.$message({
                    type:"into",
                    message:"已取消修改"
                });
            }).finally(()=>{
                this.dialogUpdateVisible=false;
            });
        },
        //显示添加页面
        handleAdd(row){
            this.dialogFormVisible=true;
        },
        //提交添加信息
        handleSave(){
            this.$confirm("此操作将从数据库中永久修改数据，是否继续？","提示",{
                confirmButtonText:"确定",
                cancelButtonText:"取消",
                type: "warning"
            }).then(()=>{   //选择确定的情况
                axios({
                    method: "PUT",
                    url: "/book/addRow",
                    data: this.elAdd
                }).then((res)=>{
                    if(res.data=true){
                        this.$message({
                            message:"添加成功",
                            type:"success"
                        });
                    }else{
                        this.$message(" 添加失败，请重试");
                    }
                }).finally(()=>{
                    this.findPage();
                });
            }).catch(()=>{     //选择取消的情况
                this.$message({
                    type:"into",
                    message:"已取消添加"
                });
            }).finally(()=>{
                this.dialogFormVisible=false;
            });
        },
        //行删除数据
        rowDelete(row){
            this.$confirm("此操作将从数据库中永久删除数据，是否继续？","提示",{
                confirmButtonText:"确定",
                cancelButtonText:"取消",
                type: "warning"
            }).then(()=>{   //选择确定的情况
                axios({
                    method: "delete",
                    url: "/book/deleteRow/"+row.id,
                }).then((res)=>{
                    if(res.data=true){
                        this.$message({
                            message:"删除成功",
                            type:"success"
                        });
                    }else{
                        this.$message(" 删除失败，请重试");
                    }
                }).finally(()=>{
                    this.findPage();
                });
            }).catch(()=>{     //选择取消的情况
                this.$message({
                    type:"into",
                    message:"已取消删除"
                });
            });
        },
        //多行删除
        delAll(){
            this.$confirm("此操作将从数据库中永久删除数据，是否继续？","提示",{
                confirmButtonText:"确定",
                cancelButtonText:"取消",
                type: "warning"
            }).then(()=>{   //选择确定的情况
                axios({
                    method: "POST",
                    url: "/book/delete",
                    data: this.multipleSelection
                }).then((res)=>{
                    console.log(res);
                    if(res.data=false){
                        this.$message(" 删除失败，请重试");
                    }else{
                        this.$message({
                            message:"删除成功",
                            type:"success"
                        });
                    }
                }).finally(()=>{
                    this.findPage();
                });

            }).catch(()=>{     //选择取消的情况
                this.$message({
                    type:"into",
                    message:"已取消删除"
                });
            });
        },
        //多选
        handleSelectionChange(rows){
            this.multipleSelection = rows;
            console.log(this.multipleSelection);  //打印选中的行集合
        },
        //行选框，点击其他行按钮也会选上单选框所以不使用
        handleRowClick(row){
            this.$refs.multipleTable.toggleRowSelection(row);
            console.log(row)  //打印的时当前选中的行
        },
        //上一页
        Previous(){
            this.page.currentPage=this.page.currentPage-1;
            this.findPage();
        },
        //下一页
        Next(){
            this.page.currentPage=this.page.currentPage+1;
            this.findPage();
        },
    }
});